<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 - 课程管理系统</title>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- 引入Google字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4285f4;
            --primary-hover: #3367d6;
            --secondary-color: #f1f1f1;
            --secondary-hover: #ddd;
            --text-color: #333;
            --light-text: #555;
            --border-color: #ddd;
            --error-color: #ff4444;
            --success-color: #00C851;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Roboto', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-image: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
        }

        .login-container {
            background-color: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            width: 100%;
            max-width: 420px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .login-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--primary-color);
            background: linear-gradient(90deg, #4285f4 0%, #34a853 33%, #fbbc05 66%, #ea4335 100%);
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .login-header h1 {
            color: var(--text-color);
            font-size: 28px;
            font-weight: 500;
            margin-bottom: 10px;
        }

        .login-header p {
            color: var(--light-text);
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 25px;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--light-text);
            font-size: 14px;
        }

        .input-wrapper {
            position: relative;
        }

        .input-wrapper i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--light-text);
            font-size: 16px;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px 12px 45px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 15px;
            transition: all 0.3s;
            height: 48px;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
            outline: none;
        }

        .btn {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn i {
            margin-right: 8px;
        }

        .btn-login {
            background-color: var(--primary-color);
            color: white;
            margin-bottom: 15px;
        }

        .btn-login:hover {
            background-color: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(66, 133, 244, 0.2);
        }

        .btn-register {
            background-color: var(--secondary-color);
            color: var(--light-text);
        }

        .btn-register:hover {
            background-color: var(--secondary-hover);
        }

        .action-links {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
            font-size: 14px;
        }

        .action-links a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color 0.3s;
        }

        .action-links a:hover {
            color: var(--primary-hover);
            text-decoration: underline;
        }

        .result-message {
            margin-top: 20px;
            padding: 12px;
            border-radius: 6px;
            text-align: center;
            font-size: 14px;
            display: none;
        }

        .error {
            background-color: rgba(255, 68, 68, 0.1);
            color: var(--error-color);
            display: block;
        }

        .success {
            background-color: rgba(0, 200, 81, 0.1);
            color: var(--success-color);
            display: block;
        }

        .footer {
            text-align: center;
            margin-top: 30px;
            color: var(--light-text);
            font-size: 12px;
        }

        @media (max-width: 480px) {
            .login-container {
                padding: 30px 20px;
                margin: 0 15px;
            }
        }
    </style>
</head>
<body>
<div class="login-container">
    <div class="login-header">
        <h1>欢迎回来</h1>
        <p>请输入您的凭据以访问课程管理系统</p>
    </div>

    <form id="loginForm">
        <div class="form-group">
            <label for="userName">用户名</label>
            <div class="input-wrapper">
                <i class="fas fa-user"></i>
                <input type="text" id="userName" class="form-control" placeholder="请输入用户名">
            </div>
        </div>

        <div class="form-group">
            <label for="password">密码</label>
            <div class="input-wrapper">
                <i class="fas fa-lock"></i>
                <input type="password" id="password" class="form-control" placeholder="请输入密码">
            </div>
        </div>

        <div class="action-links">
            <div class="form-check">
                <input type="checkbox" id="rememberMe" class="form-check-input">
                <label for="rememberMe" class="form-check-label">记住我</label>
            </div>
            <a href="#" class="forgot-password">忘记密码?</a>
        </div>

        <button type="button" class="btn btn-login" onclick="submitLogin()">
            <i class="fas fa-sign-in-alt"></i> 登录
        </button>

        <a href="register.html" class="btn btn-register">
            <i class="fas fa-user-plus"></i> 注册新账户
        </a>
    </form>

    <div id="result" class="result-message"></div>

    <div class="footer">
        &copy; 2023 课程管理系统. 保留所有权利.
    </div>
</div>

<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function submitLogin() {
        const userName = $('#userName').val().trim();
        const password = $('#password').val().trim();
        const resultDiv = $('#result');

        // 清除之前的结果
        resultDiv.removeClass('success error').hide();

        // 简单验证
        if (!userName || !password) {
            resultDiv.text('请输入用户名和密码').addClass('error').show();
            return;
        }

        // 显示加载状态
        const loginBtn = $('.btn-login');
        const originalText = loginBtn.html();
        loginBtn.html('<i class="fas fa-spinner fa-spin"></i> 登录中...').prop('disabled', true);

        $.ajax({
            url: '/sysUser/login',
            type: 'GET',
            data: {
                userName: userName,
                password: password
            },
            success: function(response) {
                if (response.success) {
                    resultDiv.text(response.message).addClass('success').show();
                    setTimeout(() => {
                        window.location.href = "index.html";
                    }, 1000);
                } else {
                    resultDiv.text(response.message || '登录失败').addClass('error').show();
                }
            },
            error: function(xhr) {
                const errorMsg = xhr.responseJSON && xhr.responseJSON.message
                    ? xhr.responseJSON.message
                    : '请求失败，请检查网络连接后重试';
                resultDiv.text(errorMsg).addClass('error').show();
            },
            complete: function() {
                loginBtn.html(originalText).prop('disabled', false);
            }
        });
    }

    // 按Enter键提交表单
    $(document).ready(function() {
        $('#password').keypress(function(e) {
            if (e.which === 13) {
                submitLogin();
                return false;
            }
        });
    });
</script>
</body>
</html>